<%@ page language="java" import="java.util.*" pageEncoding="utf-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ include file="ajax.jsp"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>

<!doctype html>
<html lang="zh_CN">
<head>
    <base href="<%=basePath%>"/>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <title>${title}</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f0f0f0;
        }

        .register-block {
            max-width: 800px;
            margin: 0 auto;
            padding: 10px;
            background-color: #fff;
            border: 1px solid #ccc;
            margin-top: 20px;
        }

        .register-ur_here {
            margin-top: 10px;
            font-size: 14px;
            color: #333;
        }

        .register-input {
            padding: 5px;
            margin: 5px 0;
            width: 100%;
            border: 1px solid #ccc;
            border-radius: 3px;
        }

        .register-submit {
            padding: 5px;
            margin: 5px 0;
            width: 100%;
            border: none;
            border-radius: 3px;
            background-color: #007bff;
            color: #fff;
            cursor: pointer;
        }

        .register-submit:hover {
            background-color: #0056b3;
        }
    </style>
</head>

<body>
<jsp:include page="header.jsp"></jsp:include>
<div class="register-block">
    <div class="blank"></div>
    <div class="register-ur_here">
        当前位置: <a href="/user/index">首页</a>
        <code> > </code>
        用户注册
    </div>
</div>
<div class="blank"></div>
<script>
    function register(){
        let username = document.getElementsByName('username')[0].value;
        let password = document.getElementsByName('password')[0].value;
        let gender = document.getElementsByName('gender')[0].value;
        let birthday = document.getElementsByName('birthday')[0].value;
        let realName = document.getElementsByName('realName')[0].value;
        let contact = document.getElementsByName('contact')[0].value;
        if ((username === '' || password === '' || gender == '' || birthday == '' || avatar == ''
            || realName === '' || contact === '')){
            console.log("信息不能为空");
            document.getElementById('msg').innerHTML = "信息不能为空";
            setTimeout(()=>{
                document.getElementById('msg').innerHTML = "";
            }, 2000);
            return false;
        }
        let registerUser = {
            username: username,
            password: password,
            realName: realName,
            contact: contact,
            gender: gender,
            birthday: birthday,
        }
        console.log("registerUser==>", registerUser);
        axiosInstance.post(
            '/user/register',
            registerUser,
            {
                headers: headersJson
            }
        ).then((res)=>{
            console.log(res.data);
            if (res.data.code == 200){
                console.log("注册成功");
                //跳转到登录页面
                location.href = "/user/loginPage";
            }else {
                console.log(res.data.desc);
                document.getElementById('btn-msg').innerHTML = "注册失败";
                setTimeout(()=>{
                    document.getElementById('btn-msg').innerHTML = "";
                }, 2000);
            }
        }).catch(e=>{
            console.log(e);
            console.log("注册出错");
            document.getElementById('btn-msg').innerHTML = "注册出现异常";
            setTimeout(()=>{
                document.getElementById('btn-msg').innerHTML = "";
            }, 2000);
        })
    }

</script>
<div id="msg"></div>
<div class="register-block">
    <div class="register-box">
        <div class="register-box_1">
            <h3>
                <span>用户注册</span>
            </h3>
            <form name="myForm">
                <table>
                    <tr>
                        <td align="right">用户名：</td>
                        <td><input type="text" name="username" size="25" class="register-input" placeholder="请输入用户名"
                                   required/></td>
                    </tr>
                    <tr>
                        <td align="right">密码：</td>
                        <td><input name="password" type="password" size="25" class="register-input" placeholder="请输入密码"
                                   required/></td>
                    </tr>
                    <tr>
                        <td align="right">姓名：</td>
                        <td><input name="realName" type="text" size="25" class="register-input" placeholder="请输入姓名"
                                   required/></td>
                    </tr>
                    <tr>
                        <td align="right">性别：</td>
                        <td><input type="radio" name="gender" value="男" title="男" checked/>男&nbsp;&nbsp;&nbsp;
                            <input type="radio" name="gender" value="女" title="女" />女
                        </td>
                    </tr>
                    <tr>
                        <td align="right">出生日期：</td>
                        <td><input type="date" size="25" name="birthday" class="date-check register-input" name="date"
                                   placeholder="请输入出生日期" required>
                        </td>
                    </tr>
                    <tr>
                        <td align="right">联系方式：</td>
                        <td><input name="contact" type="text" size="25" class="register-input" placeholder="请输入联系方式"
                                   required/></td>
                    </tr>
                    <tr>
                        <td colspan="1"></td>
                        <td colspan="1" align="center">
                            <input type="button" value="确认注册" id="sub"
                                   class="register-submit" onclick="register()" />
                        </td>
                    </tr>
                    <tr>
                        <div id="btn-msg"></div>
                    </tr>
                </table>
            </form>
        </div>
    </div>
    <div class="blank5"></div>
</div>
<jsp:include page="footer.jsp"></jsp:include>
</body>
</html>
